
<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {Server} from '@/stores/ajax';
import {ServerUtils} from '@/serverUtils'
import {Delta, QuillEditor} from '@vueup/vue-quill'
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html';
import Viewer from '@/components/viewer.vue'
import * as cheerio from 'cheerio'
import {lowerPostImage} from '@/utils';

const getQuillHTML = (editor: any) => {
    return new QuillDeltaToHtmlConverter(editor.getContents().ops, {}).convert()
}

type PostCallback = (page: number, posts_per_page: number) => Promise<any>
const props = defineProps({
    postCallback: Function
})
const postCallback: PostCallback = props.postCallback as any
// let maxPostWordsLength = 150

const handleCollect = async (post: any) => {
    await ServerUtils.collect(post)
}
const handleStar = async (post: any) => {
    await ServerUtils.star(post)
}

// let forwardVisible = $ref(false)
// let forwardEditor = $ref<any>()
// const handleForward = (post: any) => {
//     if (forwardEditor && post.pid != forwardingPost.pid) forwardEditor.setContents(new Delta())
//     forwardingPost = post
//     forwardVisible = true
// }
// let forwardingPost = $ref<any>()
// const handleForwardCommit = async () => {
//     await Server.post('/post/post', {
//         parent_pid: forwardingPost.pid,
//         subarea: 10001,
//         content: getQuillHTML(forwardEditor)
//     }, true).then(res => {
//         if (res.data && res.data.code == 0) {
//             forwardEditor.setContents(new Delta())
//             refresh()
//         }
//     })
// }

let newPosts = $ref<any[]>([])
let loadedPage = 1
let loading = false
let loadAll = ref(false)
const refresh = async () => {
    newPosts = []
    loadedPage = 1
    nextTick(() => {
        load(1)
    })
}
defineExpose({
    refresh
})
// refresh()
const load = async (page = loadedPage) => {
    console.log(`Loadding page ${loadedPage}`)
    if (loading == true) return
    loading = true
    await postCallback(page, 10)
        .then(posts => {
            console.log(posts)
            let lastCnt = newPosts.length
            if (posts?.list.length) {
                for (let post of posts.list) {
                    lowerPostImage(post)
                    newPosts.push(post)
                }
                loadedPage++
            }
            loading = false
            if (lastCnt == newPosts.length) {
                loadAll.value = true
            }
        })
}

</script>
<!-- }}} -->

<template>

    <div v-if='$DEV' class="dev-tag">postList2</div>
    <ul class="post-list" v-infinite-scroll="load">
        <li v-for="item in newPosts as any"
            class="fvs post-item hover__g">
            <div class="post-item-wrapper fhs">
                <div class="post-avatar">
                    <el-avatar :size="50"
                        :src="Server.fileBaseURL + item.user.avatar" />
                </div>
                <div class="post-rightside">
                    <div class="click hp"
                        @click="$router.push({path: `world/post/${item.pid}`})">
                        <div
                            class="post-rightside-wrapper fhs">
                            <div class="post-username">
                                {{ item.user.user_name}}
                            </div>
                        </div>
                        <div class="post-content"
                            v-viewer.rebuild="{inline: true}"
                            v-viewer="{movable: false}">
                            <div
                                v-dompurify-html="item.content" />
                            <!-- <QuillEditor theme="bubble" :read-only="true" v-model:content="item.content" /> -->
                        </div>

                    </div>
                    <div class="img-list">
                        <Viewer :images="item.images" />
                    </div>

                    <div class="baseline fhs" style="">
                        <div class="hp"
                            @click="$router.push({path: `world/post/${item.pid}#comment`})">
                            评论 {{
                                    item.subpost_num || ''
                            }}</div>
                        <div @click="handleCollect(item)">
                            收藏 {{ item.collect_count
                                    || ''
                            }}</div>
                        <div @click="handleStar(item)">
                            点赞{{ item.star_count ||
                                    ''
                            }}</div>
                        <!-- <div @click="handleForward(item)">转发</div> -->
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <!-- {{ loadAll}} -->
    <div v-if="!loading && loadAll" class="fh"
        style="color: #999;">
        加载完毕
    </div>
    <div v-else-if="loading" class="fh"
        style="color: #999;">
        加载中
    </div>
    <div style="height: 5vh;"></div>


    <!-- <!-1- 转发弹窗 {{{ -1-> -->
    <!-- <el-dialog title="转发" v-model="forwardVisible" -->
    <!--     width="700px" center> -->

    <!--     <div> -->
    <!--         <div class="fh" -->
    <!--             style="justify-content: start;border: grey 2px solid; "> -->
    <!--             <div style="margin:10px 20px;"> -->
    <!--                 <el-avatar :size="50" -->
    <!--                     :src="Server.fileBaseURL + user.avatar" /> -->
    <!--             </div> -->
    <!--             <div class="fv" -->
    <!--                 style="justify-content: start;"> -->
    <!--                 <div style="padding: 5px 0" -->
    <!--                     class="fontsizes3"> -->
    <!--                     <div class="fh" -->
    <!--                         style="justify-content:start;"> -->
    <!--                         <div class="bold1">{{ -->
    <!--                                 user.user_name -->
    <!--                         }}</div>@{{ -->
    <!--     user.user_name -->
    <!-- }} -->
    <!--                     </div> -->
    <!--                 </div> -->
    <!--                 <div class="fontsizes2" -->
    <!--                     style="margin-right: 20px;"> -->
    <!--                     <MyQuill theme="snow" -->
    <!--                         content-type="delta" -->
    <!--                         style="height: 130px;width: 470px;" -->
    <!--                         @ready="(e) => {forwardEditor = e}" /> -->
    <!--                     <!-1- {{ editor?.getText()}} {{ content}} -1-> -->
    <!--                 </div> -->
    <!--                 <div class="fh fontsizes2" -->
    <!--                     style="justify-content: start; gap: 20px; margin: 10px 0;"> -->
    <!--                     <div @click="handleForwardCommit">转发 -->
    <!--                     </div> -->
    <!--                 </div> -->
    <!--             </div> -->
    <!--         </div> -->
    <!--     </div> -->
    <!-- </el-dialog> -->
    <!-- <!-1- }}} -1-> -->

</template>

<style scoped lang="scss">
.ql-bubble .ql-editor {
    padding: 0;
}

.card-block {
    background-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-lighter);
    border-radius: 4px;
}

.post-list {
    min-width: 600px;
    margin-right: 8px;
    padding: 16px 12px 0;

    .user-avatar {
        margin: 10px 20px;
    }

    .post-textarea {
        justify-content: start;
        flex-grow: 1;
        margin-top: 10px;
        margin-right: 20px;

        .post-textarea-wrapper {
            height: 200px;
        }
    }

    .b-post {
        margin: 10px 0 30px;
        font-size: 16px;
        max-width: 100px;
        letter-spacing: 10px;
    }

    .b-post.b-post {
        text-indent: -10px;
        direction: rtl;
    }

    .post-item {
        margin: 5px 0px;
        padding: 0 20px;
        /* background-color: #def; */
        border-radius: 4px;

        .post-avatar {
            margin: 10px 20px 10px 0;

        }

        .post-rightside {

            .post-username {
                margin: 4px 0 0;
                font-size: 16px;
                font-weight: bold;
            }

            .post-content {
                font-size: 16px;
            }
        }

        .baseline {
            justify-content: start;
            gap: 20px;
            margin: 10px 0;
            font-size: 14px;
            color: #666;
        }
    }
}

.hover__g:hover {
    background-color: #f4f4f4;
}
</style>
<style>
.post-quill {
    height: 100%;
    width: 100%;
}
</style>


